<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐NFT平台 - 我的收益</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="bg-gray-100">
    <div class="flex h-screen bg-gray-100">
        <!-- 侧边栏 -->
        <div class="w-64 bg-white shadow-lg">
            <div class="p-4">
                <h1 class="text-2xl font-bold text-pink-600">音乐NFT平台</h1>
            </div>
            <nav class="mt-6">
                <a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-pink-100 hover:text-pink-600">
                    <i class="fas fa-home mr-3"></i>
                    <span>首页</span>
                </a>
                <a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-pink-100 hover:text-pink-600">
                    <i class="fas fa-shopping-bag mr-3"></i>
                    <span>NFT市场</span>
                </a>
                <a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-pink-100 hover:text-pink-600">
                    <i class="fas fa-user mr-3"></i>
                    <span>个人资料</span>
                </a>
                <a href="#" class="flex items-center px-6 py-3 bg-pink-100 text-pink-600">
                    <i class="fas fa-chart-line mr-3"></i>
                    <span>我的收益</span>
                </a>
                <a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-pink-100 hover:text-pink-600">
                    <i class="fas fa-plus-circle mr-3"></i>
                    <span>创建NFT</span>
                </a>
            </nav>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航 -->
            <header class="bg-white shadow-sm">
                <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
                    <h2 class="text-lg font-semibold text-gray-900">我的收益</h2>
                    <div class="flex items-center space-x-4">
                        <div class="relative">
                            <input type="search" placeholder="搜索音乐、艺人、NFT..." class="rounded-full px-4 py-2 bg-gray-100 focus:outline-none focus:ring-2 focus:ring-pink-500">
                            <button class="absolute right-3 top-1/2 transform -translate-y-1/2">
                                <i class="fas fa-search text-gray-400"></i>
                            </button>
                        </div>
                        <button id="wallet-connect" class="bg-pink-600 text-white px-4 py-2 rounded-full hover:bg-pink-700 transition duration-300">
                            连接钱包
                        </button>
                        <div class="relative inline-block text-left">
                            <button type="button" class="relative p-2 text-gray-600 hover:text-pink-600 focus:outline-none" id="notification-menu-button" aria-expanded="false" aria-haspopup="true">
                                <i class="fas fa-bell"></i>
                                <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-pink-600 rounded-full">
                                    3
                                </span>
                            </button>
                            <!-- 通知下拉菜单 -->
                            <div class="origin-top-right absolute right-0 mt-2 w-80 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="notification-menu-button" tabindex="-1" style="display: none;" id="notification-menu">
                                <!-- 通知内容 -->
                            </div>
                        </div>
                        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User Avatar" class="w-8 h-8 rounded-full">
                    </div>
                </div>
            </header>

            <!-- 滚动内容区 -->
            <main class="flex-1 overflow-y-auto bg-gray-100">
                <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
                    <!-- 用户类型切换（仅用于演示） -->
                    <div class="mb-6">
                        <label class="mr-2">用户类型：</label>
                        <select id="user-type" class="rounded-md border-gray-300 shadow-sm focus:border-pink-300 focus:ring focus:ring-pink-200 focus:ring-opacity-50">
                            <option value="artist">艺术家</option>
                            <option value="user">普通用户</option>
                        </select>
                    </div>

                    <!-- 收益概览 -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                        <div class="bg-white rounded-lg shadow-md p-6">
                            <h2 class="text-lg font-semibold mb-2">总收入</h2>
                            <p class="text-3xl font-bold text-pink-600">5.23 ETH</p>
                            <p class="text-sm text-gray-500">≈ $9,914.70 USD</p>
                        </div>
                        <div class="bg-white rounded-lg shadow-md p-6">
                            <h2 class="text-lg font-semibold mb-2">本月收入</h2>
                            <p class="text-3xl font-bold text-green-600">0.87 ETH</p>
                            <p class="text-sm text-gray-500">较上月 <span class="text-green-500">+12%</span></p>
                        </div>
                        <div class="bg-white rounded-lg shadow-md p-6">
                            <h2 class="text-lg font-semibold mb-2">待结算</h2>
                            <p class="text-3xl font-bold text-blue-600">0.15 ETH</p>
                            <p class="text-sm text-gray-500">预计3天后到账</p>
                        </div>
                    </div>
                    
                    <!-- 收入图表 -->
                    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                        <h2 class="text-lg font-semibold mb-4">收入趋势</h2>
                        <canvas id="earningsChart" width="400" height="200"></canvas>
                    </div>
                    
                    <!-- 艺术家特定内容 -->
                    <div id="artist-content" class="mb-6">
                        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                            <h2 class="text-lg font-semibold mb-4">NFT销售分析</h2>
                            <canvas id="nftSalesChart" width="400" height="200"></canvas>
                        </div>
                        <div class="bg-white rounded-lg shadow-md p-6">
                            <h2 class="text-lg font-semibold mb-4">粉丝支持</h2>
                            <p class="text-xl font-bold text-purple-600">0.5 ETH</p>
                            <p class="text-sm text-gray-500">来自32位支持者</p>
                        </div>
                    </div>

                    <!-- 普通用户特定内容 -->
                    <div id="user-content" class="mb-6" style="display: none;">
                        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                            <h2 class="text-lg font-semibold mb-4">NFT收藏价值</h2>
                            <p class="text-xl font-bold text-purple-600">2.3 ETH</p>
                            <p class="text-sm text-gray-500">总计5个NFT</p>
                        </div>
                        <div class="bg-white rounded-lg shadow-md p-6">
                            <h2 class="text-lg font-semibold mb-4">交易利润</h2>
                            <p class="text-xl font-bold text-green-600">+0.8 ETH</p>
                            <p class="text-sm text-gray-500">来自3笔成功交易</p>
                        </div>
                    </div>
                    
                    <!-- 最近交易 -->
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h2 class="text-lg font-semibold mb-4">最近交易</h2>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NFT</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200" id="transaction-list">
                                    <!-- 交易记录将通过JavaScript动态填充 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </main>
            
            <!-- 底部播放器 -->
            <div class="bg-white border-t border-gray-200 py-2">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Current Song" class="w-12 h-12 rounded-md mr-4">
                        <div>
                            <h4 class="font-semibold">电子音乐集</h4>
                            <p class="text-sm text-gray-500">DJ Electro</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="text-gray-600 hover:text-pink-600"><i class="fas fa-step-backward"></i></button>
                        <button class="w-10 h-10 rounded-full bg-pink-600 text-white flex items-center justify-center hover:bg-pink-700">
                            <i class="fas fa-play"></i>
                        </button>
                        <button class="text-gray-600 hover:text-pink-600"><i class="fas fa-step-forward"></i></button>
                    </div>
                    <div class="w-1/3">
                        <div class="bg-gray-200 rounded-full h-2">
                            <div class="bg-pink-600 h-2 rounded-full w-1/3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', (event) => {
        // 钱包连接
        document.getElementById('wallet-connect').addEventListener('click', function() {
            alert('连接钱包功能将在这里实现');
        });

        // 通知系统
        const notificationButton = document.getElementById('notification-menu-button');
        const notificationMenu = document.getElementById('notification-menu');

        notificationButton.addEventListener('click', function() {
            const expanded = this.getAttribute('aria-expanded') === 'true' || false;
            this.setAttribute('aria-expanded', !expanded);
            notificationMenu.style.display = expanded ? 'none' : 'block';
        });

        // 收入趋势图表
        const ctx = document.getElementById('earningsChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    label: '月收入 (ETH)',
                    data: [0.5, 0.8, 1.2, 0.9, 1.5, 0.87],
                    borderColor: 'rgb(236, 72, 153)',
                    backgroundColor: 'rgba(236, 72, 153, 0.1)',
                    tension: 0.1
                }]
            },// 继续前面的脚本
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // NFT销售分析图表（仅适用于艺术家）
    const nftCtx = document.getElementById('nftSalesChart').getContext('2d');
    const nftSalesChart = new Chart(nftCtx, {
        type: 'bar',
        data: {
            labels: ['NFT 1', 'NFT 2', 'NFT 3', 'NFT 4', 'NFT 5'],
            datasets: [{
                label: '销售量',
                data: [12, 19, 3, 5, 2],
                backgroundColor: 'rgba(236, 72, 153, 0.6)'
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // 用户类型切换
    const userTypeSelect = document.getElementById('user-type');
    const artistContent = document.getElementById('artist-content');
    const userContent = document.getElementById('user-content');

    userTypeSelect.addEventListener('change', function() {
        if (this.value === 'artist') {
            artistContent.style.display = 'block';
            userContent.style.display = 'none';
        } else {
            artistContent.style.display = 'none';
            userContent.style.display = 'block';
        }
        updateTransactionList(this.value);
    });

    // 动态加载交易记录
    function updateTransactionList(userType) {
        const transactionList = document.getElementById('transaction-list');
        transactionList.innerHTML = ''; // 清空现有记录

        const transactions = userType === 'artist' 
            ? [
                { date: '2023/08/10', type: '销售', nft: '电子音乐集Vol.1', amount: '+0.05 ETH' },
                { date: '2023/08/09', type: '版税', nft: '爵士夜曲', amount: '+0.002 ETH' },
                { date: '2023/08/08', type: '粉丝支持', nft: '-', amount: '+0.01 ETH' }
            ]
            : [
                { date: '2023/08/10', type: '购买', nft: '电子音乐集Vol.1', amount: '-0.05 ETH' },
                { date: '2023/08/08', type: '出售', nft: '摇滚经典', amount: '+0.08 ETH' },
                { date: '2023/08/05', type: '购买', nft: '古典协奏曲', amount: '-0.03 ETH' }
            ];

        transactions.forEach(transaction => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${transaction.date}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${transaction.type}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${transaction.nft}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm ${transaction.amount.startsWith('+') ? 'text-green-600' : 'text-red-600'}">${transaction.amount}</td>
            `;
            transactionList.appendChild(row);
        });
    }

    // 初始化交易记录
    updateTransactionList('artist');

    // 点击其他地方关闭通知菜单
    document.addEventListener('click', function(event) {
        if (!notificationButton.contains(event.target) && !notificationMenu.contains(event.target)) {
            notificationButton.setAttribute('aria-expanded', 'false');
            notificationMenu.style.display = 'none';
        }
    });

    // 模拟加载中状态
    function simulateLoading() {
        const loadingOverlay = document.createElement('div');
        loadingOverlay.className = 'fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50';
        loadingOverlay.innerHTML = '<div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-pink-500"></div>';
        document.body.appendChild(loadingOverlay);

        setTimeout(() => {
            document.body.removeChild(loadingOverlay);
        }, 1000); // 模拟1秒的加载时间
    }

    // 为一些操作添加加载效果
    document.getElementById('wallet-connect').addEventListener('click', simulateLoading);
    userTypeSelect.addEventListener('change', simulateLoading);

    // 添加交互性提示
    const interactiveElements = document.querySelectorAll('button, a, select');
    interactiveElements.forEach(element => {
        element.title = element.textContent.trim() || '点击交互';
    });

    // 响应式调整
    function handleResponsiveLayout() {
        const mainContent = document.querySelector('main');
        if (window.innerWidth < 768) {
            mainContent.classList.remove('px-8');
            mainContent.classList.add('px-4');
        } else {
            mainContent.classList.remove('px-4');
            mainContent.classList.add('px-8');
        }
    }

    window.addEventListener('resize', handleResponsiveLayout);
    handleResponsiveLayout(); // 初始调用

});
    </script>
</body>
</html>
